<template>
  <view
    class="s-cell"
    :class="c_class"
    :hover-class="hoverClass"
    :hover-start-time="hoverStartTime"
    :hover-stay-time="hoverStayTime"
    :style="c_style"
    @click="handleClick"
  >
    <div class="s-cell__content">
      <slot>
        <slot name="icon">
          <s-icon
            v-if="icon"
            custom-class="s-cell__left-icon"
            :class-prefix="iconPrefix"
            :name="icon"
            :size="iconSize"
            :color="iconColor"
          />
        </slot>
        <view v-if="titleSlot || $isDef(title)" class="s-cell__title" :style="title_style">
          <slot name="title">
            <text>{{ title }}</text>
          </slot>
          <view v-if="labelSlot || $isDef(label)" class="s-cell__label" :style="label_style">
            <slot name="label">
              <text>{{ label }}</text>
            </slot>
          </view>
        </view>
        <view v-if="valueSlot || $isDef(value)" class="s-cell__value" :style="value_style">
          <slot name="value">
            <text>{{ value }}</text>
          </slot>
        </view>
        <slot name="rightIcon">
          <s-icon
            v-if="arrow"
            custom-class="s-cell__right-icon"
            :name="arrowIcon"
            :size="arrowSize"
            :color="arrowColor"
          />
        </slot>
      </slot>
    </div>
  </view>
</template>

<script>
import componentMixin from '../../mixins/componentMixin';

/**
 * s-cell
 * @description 单元格
 * @property {*} title 左侧标题
 * @property {*} value 右侧内容
 * @property {*} label 标题下方的描述信息
 * @property {String} background 背景色
 * @property {Number|String} padding 内边距
 * @property {Boolean} border 是否显示边框
 * @property {String} borderColor 边框颜色
 * @property {String} hoverClass 点击效果，设为none可禁用点击效果
 * @property {Number} hoverStartTime 按住后多久出现点击态，单位毫秒
 * @property {Number} hoverStayTime 手指松开后点击态保留时间，单位毫秒
 * @property {String} icon 左侧图标名称或图片链接
 * @property {String} iconPrefix 图标类名前缀，同 Icon 组件的 class-prefix 属性
 * @property {String} iconColor 左侧图标颜色
 * @property {Number|String} iconSize 左侧图标大小
 * @property {Boolean} arrow 是否展示右侧箭头
 * @property {Boolean} arrowIcon 右侧图标名称
 * @property {String} arrowColor 右侧图标颜色
 * @property {Number|String} arrowSize 右侧图标大小
 * @property {String|Object} titleStyle 标题样式
 * @property {String|Object} valueStyle 内容样式
 * @property {String|Object} labelStyle 描述样式
 * @property {Boolean} titleSlot 是否使用左侧标题插槽
 * @property {Boolean} valueSlot 是否使用右侧内容插槽
 * @property {Boolean} labelSlot 是否使用描述信息插槽
 * @event {Function} click 点击事件
 * @example <s-cell title="单元格" />
 */
export default {
  name: 'SCell',
  mixins: [componentMixin],
  props: {
    title: {
      default: '',
    },
    value: {
      default: '',
    },
    label: {
      default: '',
    },
    background: String,
    padding: [Number, String],
    border: {
      type: Boolean,
      default: true,
    },
    borderColor: String,
    hoverClass: {
      type: String,
      default: 's-cell--hover',
    },
    hoverStartTime: {
      type: Number,
      default: 20,
    },
    hoverStayTime: {
      type: Number,
      default: 70,
    },
    icon: String,
    iconPrefix: {
      type: String,
      default: 's-icon',
    },
    iconColor: String,
    iconSize: [Number, String],
    arrow: Boolean,
    arrowIcon: {
      type: String,
      default: 'arrow',
    },
    arrowSize: {
      type: [Number, String],
      default: 28,
    },
    arrowColor: String,
    titleStyle: [String, Object],
    valueStyle: [String, Object],
    labelStyle: [String, Object],
    titleSlot: Boolean,
    valueSlot: Boolean,
    labelSlot: Boolean,
  },
  computed: {
    c_class() {
      return this.$mergeClass({
        's-cell--border': this.border,
      }, this.custom_class);
    },
    c_style() {
      return this.$mergeStyle({
        padding: this.$addUnit(this.padding),
        background: this.background,
        borderColor: this.borderColor,
      }, this.custom_style);
    },
    title_style() {
      return this.$mergeStyle(this.titleStyle);
    },
    value_style() {
      return this.$mergeStyle(this.valueStyle);
    },
    label_style() {
      return this.$mergeStyle(this.labelStyle);
    },
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e);
    },
  },
};
</script>

<style lang="scss" src="./index.scss"></style>
